<template>
  <div class="common-num-range">
    <el-input-number :placeholder="startPlaceholder" v-model="startValue" :controls="false"
      @change="(val) => valueChange('start', val)" clearble />
    <span>-</span>
    <el-input-number :placeholder="endPlaceholder" v-model="endValue" :controls="false"
      @change="(val) => valueChange('end', val)" clearble />
    <el-form-item :prop="endProp" v-show="false"></el-form-item>
  </div>
</template>
<script>
/*
 * File Created: 2023-03-16 11:35:18
 * Author: 余保林 (yubaolin6@outlook.com)
 * Desc: 数字范围组件
 * Last Modified: 2023-03-16 17:39:35
 * Modified By: 余保林 (yubaolin6@outlook.com>)
 */

import { reactive, toRefs, watch } from 'vue'
export default {
  props: {
    startPlaceholder: {
      type: String,
      default: '最小'
    },
    endPlaceholder: {
      type: String,
      default: '最大'
    },
    start: {
      type: [Number, undefined],
      default: undefined
    },
    end: {
      type: [Number, undefined],
      default: undefined
    },
    endProp: {
      type: String,
      default: 'end'
    }
  },
  emits: ['update:start', 'update:end'],
  setup(props, ctx) {
    const state = reactive({
      startValue: props.start,
      endValue: props.end
    })
    watch(() => props.start, (newVal) => {
      state.startValue = newVal
    }, {
      immediate: true
    })
    watch(() => props.end, (newVal) => {
      state.endValue = newVal
    }, {
      immediate: true
    })
    const methods = {
      valueChange(type, val) {
        if (type === 'start') {
          ctx.emit('update:start', val)
        } else {
          ctx.emit('update:end', val)
        }
      }
    }
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>
<style lang="scss" scoped>
.common-num-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #dcdfe6;


  :deep(.el-input__inner) {
    border: 0 !important;
    box-shadow: none;
  }

  .el-input-number {
    width: 50%;
  }
}</style>
